import { View, Text, ViewProps } from "@tarojs/components";
import "./index.less";
import { TValue } from "@/types";

// 类型定义
type TabItem = {
  value: TValue;
  label: string;
  icon?: any;
};

type TabsProps = {
  options: TabItem[]; // 选项卡列表
  value: TValue; // 当前选中值
  onChange?: (value: TValue) => void;
} & ViewProps;

export default function Tabs({
  options = [],
  value,
  onChange,
  ...rest
}: TabsProps) {
  // 处理点击切换
  const handleClick = (value: TValue) => {
    onChange?.(value);
  };

  return (
    <View className="tabs-container" {...rest}>
      <View className="flex" style={{ width: "100%" }}>
        {options.map((item) => (
          <View
            key={item.value}
            className={`tab-item ${value === item.value ? "active" : ""}`}
            onClick={() => handleClick(item.value)}
          >
            {item.icon && <View className="tab-icon">{item.icon()}</View>}
            <Text className="tab-label">{item.label}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}
